$(document).ready(function(){
    var spanImag = $(".box1 span");
    var open = false;
    spanImag.css({
        'opacity':'0',
        'top':'283px'
        });
    var image1 = $(".pic4,.pic4-1");
    image1.css({
        'opacity':'0',
        'top':'431px'
    })
    var innerHeight = window.innerHeight;
    var setHeigt = $("#header").height() + $(".part-a").height() - innerHeight;
    var setNewHeight = setHeigt + $(".part-b").height();

    var six = $(".six"); //six里面需要动画的图片的父级
    var item;
    for(var i=0;i<six.length;i++){
        item = $(six[i]);
        item.data("hi",setNewHeight+(item.height()*i));
        item.data("open",false);
    }
    console.log(six.length);
    function setAnimate(element,css,time){
        return function(){
            element.animate(css,time);
        }
    }
    $(document).scroll(function(){
        var scrollHeight = $(document).scrollTop();
        if(scrollHeight>=setHeigt && open==false){
            for(var i=0;i<spanImag.length;i++){  
                setTimeout(setAnimate($(spanImag[i]),{opacity:1,top:'50px'},500),(i+1)*500)
            }
            open=true;
        }

        for(var index=0;index<six.length;index++){
            item = $(six[index]);
            if(scrollHeight>=item.data("hi") && item.data("open")==false){
                setAnimate(item.find('.pic4,.pic4-1'),{opacity:1,top:'-20px'},1000)();
                item.data("open",true);
            }
        }
        
    });
    $(".family").on("mouseenter",function(event){
        console.log("over");
        var mask = $(this).children(".family-big-mask");
        var text = $(this).children(".family-text");
        mask.fadeOut(150,function(){});
        text.fadeOut(150,function(){});

    });
    $(".family").on("mouseleave",function(event){
        console.log("out");
        var mask = $(this).children(".family-big-mask");
        var text = $(this).children(".family-text");
        mask.fadeIn(150,function(){});
        text.fadeIn(150,function(){});
    });

    function setCss(element,css){
        return function(){
            if(element){
                element.css(css);
            }else{
                $('.different').css(css);
            }
        }
    }
    var familyItem = $(".family-info");
    var timeKey;
    $(".js-family-item").on("mouseover",function(){
        if (timeKey) clearTimeout(timeKey);
        // familyItem.removeClass('different');
        var info =$(this).children(".family-info");
        // info.addClass('different');
        timeKey = setTimeout(setCss(info,{'display':'block'}),500);
    })
    $(".js-family-item").on("mouseout",function(){
        var info =$(this).children(".family-info");
        info.css({'display':'none'});
        // setTimeout(setCss(info,{'display':'none'}),0) ;
    })
    $("#js-family").on("mouseout",function(){
        clearTimeout(timeKey);

    })
        


})

